<template>
	<!-- 主容器，根据isDark状态切换暗黑模式 -->
	<view class="path-container" :class="{ dark: isDark }">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack"><</view>
			<!-- 页面标题 -->
			<view class="nav-title">路径规划</view>
		</view>

		<!-- 地图区域占位符（实际项目中可替换为真实地图组件） -->
		<view class="map-placeholder">
			<view class="map-icon">🗺️</view>
			<text class="map-text">地图预览区域</text>
		</view>

		<!-- 路径点列表区域 -->
		<view class="path-section">
			<!-- 路径点列表头部 -->
			<view class="section-header">
				<text class="section-title">路径点 ({{ pathPoints.length }})</text>
				<!-- 添加路径点按钮 -->
				<view class="action-btn primary" @click="addWaypoint">
					<text>+ 添加</text>
				</view>
			</view>
			<!-- 可滚动路径点列表 -->
			<scroll-view scroll-y class="path-list">
				<!-- 空列表提示 -->
				<view v-if="pathPoints.length === 0" class="empty-list">
					<text>暂无路径点，请点击右上角添加</text>
				</view>
				<!-- 路径点列表项 -->
				<view v-for="(point, index) in pathPoints" :key="index" class="path-item">
					<view class="point-info">
						<!-- 路径点序号 -->
						<text class="point-index">{{ index + 1 }}</text>
						<!-- 路径点名称 -->
						<text class="point-name">{{ point.name }}</text>
					</view>
					<!-- 删除按钮 -->
					<view class="action-btn danger" @click="removeWaypoint(index)">
						<text>删除</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部控制按钮区域 -->
		<view class="bottom-controls">
			<!-- 清空路径按钮 -->
			<view class="control-button clear" @click="clearPath">清空路径</view>
			<!-- 开始导航按钮 -->
			<view class="control-button start" @click="startNavigation">开始导航</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 路径点数组，包含路径点信息
				pathPoints: [{
					name: '起点：充电桩'  // 默认起点
				}, {
					name: '途经点：客厅中央'  // 默认途经点
				}],
				// 是否暗黑模式标志
				isDark: false
			};
		},
		
		// 页面显示生命周期钩子
		onShow() {
			// 从全局获取暗黑模式设置
			const dark = getApp().globalData.darkMode;
			this.isDark = dark;
		
			// 根据暗黑模式设置界面样式
			if (dark) {
				// 暗黑模式下的tabBar样式
				uni.setTabBarStyle({
					backgroundColor: '#1e1e1e',
					borderStyle: 'black',
					color: '#999999',
					selectedColor: '#ffffff'
				});
				// 暗黑模式下的导航栏样式
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#1e1e1e'
				});
			} else {
				// 亮色模式下的tabBar样式
				uni.setTabBarStyle({
					backgroundColor: '#ffffff',
					borderStyle: 'black',
					color: '#7A7E83',
					selectedColor: '#fb7e29'
				});
				// 亮色模式下的导航栏样式
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#F8F8F8'
				});
			}
		},
		
		methods: {
			/**
			 * 返回上一页
			 */
			goBack() {
				uni.switchTab({
					url: '/pages/data/data'  // 切换到数据页
				})
			},
			
			/**
			 * 添加路径点
			 */
			addWaypoint() {
				// 计算新路径点的序号
				const newIndex = this.pathPoints.length + 1;
				// 添加新路径点
				this.pathPoints.push({
					name: `自定义点 ${newIndex}`  // 默认名称
				});
				// 显示添加成功提示
				uni.showToast({
					title: '已添加路径点',
					icon: 'none'  // 不显示图标
				});
			},
			
			/**
			 * 删除指定路径点
			 * @param {number} index - 要删除的路径点索引
			 */
			removeWaypoint(index) {
				// 从数组中移除指定索引的路径点
				this.pathPoints.splice(index, 1);
				// 显示删除成功提示
				uni.showToast({
					title: '已删除',
					icon: 'none'
				});
			},
			
			/**
			 * 清空所有路径点
			 */
			clearPath() {
				// 如果已经是空列表则直接返回
				if (this.pathPoints.length === 0) return;
				
				// 显示确认对话框
				uni.showModal({
					title: '确认',
					content: '确定要清空所有路径点吗？',
					success: (res) => {
						// 如果用户确认则清空数组
						if (res.confirm) {
							this.pathPoints = [];
						}
					}
				});
			},
			
			/**
			 * 开始导航
			 */
			startNavigation() {
				// 检查路径点数量是否足够
				if (this.pathPoints.length < 2) {
					uni.showToast({
						title: '请至少设置两个路径点',
						icon: 'none'
					});
					return;
				}
				
				// 显示加载中提示
				uni.showLoading({
					title: '正在发送路径...'
				});
				
				// 模拟发送路径到服务器的延迟
				setTimeout(() => {
					// 隐藏加载提示
					uni.hideLoading();
					// 显示导航开始提示
					uni.showToast({
						title: '小车已开始按路径行驶',
						icon: 'success'
					});
				}, 1500);  // 1.5秒后执行
			}
		}
	}
</script>
<style lang="scss">
	// 导入公共样式
	@import "@/common/page-style.scss";

	// 主容器样式
	.path-container {
		display: flex;
		flex-direction: column;
		height: 100vh;  // 全屏高度
	}
	
	// 地图占位区域样式
	.map-placeholder {
		height: 40vh;  // 占40%视口高度
		background-color: #e9ecef;  // 浅灰色背景
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #adb5bd;  // 灰色文字
		.map-icon { 
			font-size: 80rpx;  // 大图标
		}
		.map-text { 
			font-size: 32rpx; 
			margin-top: 20rpx; 
		}
	}

	// 路径点区域样式
	.path-section {
		flex: 1;  // 填充剩余空间
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		background: white;
		border-top-left-radius: 40rpx;  // 圆角顶部
		border-top-right-radius: 40rpx;
		margin-top: -40rpx;  // 上移覆盖部分地图区域
		box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.05);  // 顶部阴影
	}
	
	// 可滚动列表样式
	.path-list {
		flex: 1;
		height: 0;  // 关键，让scroll-view在flex布局中正确工作
	}

	// 空列表提示样式
	.empty-list {
		text-align: center;
		color: #999;
		padding-top: 100rpx;
	}

	// 路径点项样式
	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1px solid #f0f0f0;  // 底部边框
	.point-info {
		display: flex;
		align-items: center;
	}
	.point-index {
		background: #f8f9fa;  // 浅灰色背景
		color: #495057;  // 深灰色文字
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;  // 圆形
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		font-weight: 600;  // 加粗
	}
	.point-name {
		font-size: 30rpx;
		color: #333;
	}
}

	// 底部控制按钮区域样式
	.bottom-controls {
		display: flex;
		padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));  // 考虑安全区域
		background: #fff;
		box-shadow: 0 -5rpx 20rpx rgba(0,0,0,0.05);  // 顶部阴影
		gap: 24rpx;  // 按钮间距
	.control-button {
		flex: 1;  // 等宽
		padding: 28rpx;
		border-radius: 60rpx;  // 大圆角
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.2s ease;  // 过渡动画
		&:active {
			transform: scale(0.98);  // 点击缩小效果
		}
	}
	.clear {
		background: #f1f3f5;  // 浅灰色
		color: #495057;  // 深灰色文字
	}
	.start {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);  // 橙色渐变
		color: white;
	}
}

/* 夜间模式样式 */
.path-container.dark {
	background: #121212;  // 深色背景

	.nav-bar {
		background: #1e1e1e; // 头部背景变深色
		box-shadow: none;

		.nav-back,
		.nav-title {
			color: #fff; // 白色文字
		}
	}

	.map-placeholder {
		background-color: #2a2a2a;  // 深灰色背景
		color: #bbb;  // 浅灰色文字
	}

	.path-section {
		background: #1e1e1e;  // 深色背景
		box-shadow: none;
	}

	.point-name {
		color: #fff;  // 白色文字
	}

	.point-index {
		background: #333;  // 深灰色背景
		color: #fff;  // 白色文字
	}

	.empty-list {
		color: #888;  // 灰色文字
	}

	.bottom-controls {
		background: #1e1e1e;  // 深色背景
		box-shadow: none;

		.clear {
			background: #2a2a2a;  // 更深灰色
			color: #ccc;  // 浅灰色文字
		}

		.start {
			background: linear-gradient(135deg, #ff8c42 0%, #ffb347 100%);  // 亮橙色渐变
			color: #fff;
		}
	}
}
</style>